@import './particles/consts';
@import './particles/mixins';
@import './particles/filepond';
@import './layout/mini-post';
@import './layout/sidenav';

.col-layout{
    position: absolute;
    top:0; left:0;
    right: 0;
    bottom:0;
    overflow: hidden;
    .col-4{
        position: absolute;
        top:0; left:0;
        bottom:0;
        width: 200px;
    }
    .col-20{
        position: absolute;
        top:0; left: 200px;
        bottom:0; right:0;
        overflow: hidden;
    }
    .new-article{
        display: block;
        margin:0 auto 10px;
        width: 120px;
        height: 32px;
        color:#fff;
        line-height: 30px;
        text-align: center;
        border-radius: 50px;
        background: $main-color;
        transition: background .2s;
        &:hover{background: #3ac0e8;}
    }
    .col-list{
        position: absolute;
        top:0; left:0;
        width: 360px;
        height:100%;
        overflow: auto;
        padding: 20px 0;
        .page__paginator{margin-top: 10px;}
    }
    .col-content{
        position: absolute;
        top:0;
        right:0;
        left:360px;
        height: 100%;
        overflow-y: auto;
        padding: 20px;
        border-left: 1px solid #e0e0e0;
    }
}

#articles-list{
    .dl{padding: 10px;
        border-top: 1px solid #e0e0e0;
        &:first-child{border:0;}
        &.on{color: #fff;
            background: $main-color--hover;
            .post-title{color: #242f35;}
            .actions{
                .icon:hover{color: #242f35;}
            }
        }
    }
    .post-title{
        cursor: pointer;
        font-size: 16px;
        color: #242f35;
        transition: color .2s;
        &:hover{color: $main-color;}
    }
    .author{font-size: 14px;}
    .icon-title{
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
    .actions{
        user-select: none;
        .icon{
            font-size: 13px;
            cursor: pointer;
            transition: color .2s;
            margin-right: 10px;
            &:hover{color: $main-color;}
            &:before{margin-right: 5px;}
        }
    }
}

.temp-preview{
    text-align: center;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    .icon-preview{font-size: 100px;}
}

.page__post{
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.page__content {
    overflow: hidden;
    .closeForm{
        display: block;
        text-align: center;
        width: 100px;
        height: 40px;
        line-height: 40px;
        position: relative;
        font-size: 30px;
        margin: 0 auto;
        &.open .icon-top{
            transform: rotate(0);
        }
        .icon-top{
            display: block;
            transform: rotate(180deg);
        }
    }
}

.post__cover {
    width: 100%;
    overflow: hidden;
    text-align: center;
    &.default__cover {
        img{max-width: 100%;}
    }

    img {
        display: inline-block;
        vertical-align: top;
        max-height: 250px;
        max-width: 100%;
    }
}

.post__info {
    margin: $pad 0;
    padding-top: 10px;
}

.post__title {
    font-size: 2em;
    color: $title-fc;
    margin: .5em 0;
    font-weight: 400;
    line-height: 1;
}

.post__mark {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}

.mark__block {
    display: flex;
    align-items: center;
    margin-right: 15px;
    height: 24px;

    .mark__icon {
        margin-right: 5px;
        width: 16px;
    }

    .mark__list {
        line-height: 25px;
    }

    .mark__item {
        float: left;
        margin-right: 5px;

        & > span {
            vertical-align: middle;
        }

        & > a {
            @include link($main-color);
            color: $main-fc;
            display: block;
        }

    }
}

.mark__tags{
    .mark__item{
        border-radius: 20px;
        border: 2px solid #d8e5f3;
        font-size: 12px;
        padding: 0 7px;
        &:hover {
            border-color: $main-color;
        }
    }
}

#separator{
    border-bottom: 1px dashed #ddd;
    padding-top: 20px;
}

.post__content {
    @include post();

    .post-announce {
        margin: 1em 0;
    }

    .post__prevs {
        display: flex;
        width: 100%;
        font-size: 0;
        font-weight: bold;
        padding-top: 10px;
        border-top: 1px dashed #ddd;
    }

    .post__prev, .post__next {
        flex: 1 0 0;
        overflow: hidden;

        & > a {
            font-size: $main-fs;
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: $main-fc;
            cursor: pointer;
            transition: color $transition;
            text-decoration: none;

            &.actived {
                color: $main-color--hover;
            }

            &:hover,
            &:active {
                color: $main-color--hover;
            }

            .icon {
                font-size: 16px;
                vertical-align: middle;
            }
        }
    }
    .post__next {text-align: right;}
}

#form-list{
    &.closed{
        max-height: 65px;
        overflow: hidden;
    }
}

@media screen and (max-width: $mq-mobile) {
    .page__main{padding: 20px 0;}
    .post-preview{display: none;}
}

.form-figure{
    &.onebtn{
        input{width: 100%;}
    }
    input{
        width: 50%;
        border: 0;
        border-left:1px solid #e0e0e0;
        height: 40px;
        line-height:40px;
        font-size: 20px;
        padding: 10px;
    }
}

#article-title{
    margin-left: -1px;
}

#post-header{
    border-bottom: 1px solid #ccc;
    text-align: right;
    position: relative;
    padding: 10px;
    z-index: 3;
    #publish{
        height: 32px;
        line-height: 32px;
        min-width: 70px;
        padding: 0 10px;
        border-radius: 4px;
        background: $main-color;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin: 5px 10px;
        cursor: pointer;
        color: #fff;
        .icon{display:none;}
        &.loading{
            .icon{display:block;}
        }
        &:hover{background: #3ac0e8;}
    }
}

.drop-panel{
    text-align: left;
    position: relative;
    display: inline-block;
    vertical-align: top;
    &.showDrop{
        .drop-content{display: block !important;}
    }
}

.drop-toggle{
    text-align: center;
    cursor: pointer;
    transition: color .2s;
    &:hover{color:$main-color;}
}

.drop-content{
    border: 1px solid #ccc;
    background: #fff;
    padding: 20px;
    position: absolute;
    right:0;
    &:before, &:after{
        content:'';
        position: absolute;
        right: 30px;
        transform: translateX(-50%);
        border-bottom: 10px solid #ccc;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }
    &:before{
        top: -10px;
    }
    &:after{
        top: -8px;
        border-bottom-color: #fff;
    }
}

.postset{
    .drop-toggle{
        width: 30px;
        height: 20px;
        line-height: 14px;
    }
}

.post-btn{
    height: 20px;
    line-height:20px;
    min-width: 60px;
    margin-left: 10px;
    text-align: center;
    transition: color .2s;
    display: inline-block;
    vertical-align: top;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    &:hover{color:$main-color;}
    &.loading{
        font-size: 0;
        &:before{
            content:'...';
            color: $main-color;
            position: absolute;
            top:0; left:0;
            right:0;bottom:0;
            font-size: 16px;
            line-height:14px;
        }
    }
}

#postform-list{
    top:30px;
    right: -100px;
    background: #fff;
    border-radius: 4px;
    margin-top: -1px;
    &:before, &:after{right:95px;}
    .tip{font-size: 12px;
        margin-top: -6px;
    }
    .form-label{margin-top: 6px;}
    .label-input{
        width: 200px;
        height: 30px;
        padding: 5px 10px;
        border-radius: 4px;
        border:1px solid #dedede;
    }
}

.editor__container{
    position: absolute;
    top:0;
    right: 0;
    bottom:0;
    left: 0;
    overflow: hidden;
    .post-content{
        position: absolute;
        top:0;
        left:0;
        width: 50%;
        height:100%;
        overflow: hidden;
    }
    .post-preview{
        position: absolute;
        top:0; left:50%;
        width: 50%;
        height:100%;
        padding: 10px 20px;
        border-left:1px solid #e0e0e0;
        overflow-y: auto;
        .post__title{
            margin: 6px 0;
            font-size: 24px;
        }
    }
    .scrollWrap-textarea{
        position: absolute;
        bottom: 0;
        top:80px;
        left:0;
        width: 100%;
    }
    .label-btns{
        padding: 10px;
        line-height: 20px;
        background: #f5f5f5;
        position: relative;
        z-index: 101;
        .icon{margin-right: 15px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            font-size: 20px;
            width: 20px;
            height: 20px;
            &:hover{
                cursor: pointer;
                color: $main-color;
            }
        }
    }
    .label-textarea{
        resize: none;
        width: 100%;
        color: #666;
        font-size: 14px;
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left: 0;
        padding: 10px;
        border-radius: 4px;
        line-height: 20px;
        border: 0;
    }
}

#growls-library{
    .growl-default{
        opacity: 1;
        position: fixed;
        top: 0;
        left:0;
        right: 0;
        bottom: 0;
        z-index: 110;
        background: rgba(0,0,0, .6);
        margin: 0;
        padding:0;
        width: auto;
        border-radius: 0;
    }
    .growl-body{
        position: fixed;
        top: 50%;
        left:50%;
        z-index: 111;
        transform: translate(-50%, -50%);
        border-radius: 4px;
        background: #fff;
        color:#7f8c8d;
        width: 800px;
    }
    .growl-close{
        font-size: 24px;
        margin-top: 5px;
        text-align: center;
        &:hover{color:$main-color;}
    }
    .growl-title{
        color:$main-color;
        line-height: 40px;
        padding: 10px 20px 0;
        border-bottom: 1px solid $main-color;
        font-size: 23px;
    }
    .growl-message{
        padding: 20px;
    }
    .fullImg{
        .growl-body{
            width: auto;
            left: 50px;
            right: 50px;
            transform: translate(0, -50%);
        }
        .imgContain{
            max-height: 560px;
            overflow: auto;
            margin:0 auto;
        }
        .img{width: 100%;}
    }
}

.img-library{
    margin-left: -20px;
    max-height: 500px;
    overflow: auto;
    .imgwrap{
        float: left;
        width: 233px;
        height: 200px;
        line-height:200px;
        border: 1px solid #f7f7f7;
        margin: 0 0 20px 20px;
        background: #f7f7f7;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        &:hover{
            .actions{opacity: 1;}
        }
    }
    .icon-cover{
        position: absolute;
        top:0; left:0;
        font-size: 60px;
        line-height: 60px;
        z-index: 2;
    }
    .img{
        width: 100%;
        height: auto;
        vertical-align: middle;
    }
    .actions{
        position: absolute;
        top:0; right: 0;
        bottom:0;left:0;
        z-index: 2;
        background: rgba(0,0,0, .3);
        text-align: center;
        color: #fff;
        opacity: 0;
        transition: opacity .2s;
        &:hover{
            .ic-cover{transform: translate(50px, 40px);}
            .ic-view{transform: translate(-50px, 40px);}
            .ic-del{transform: translate(50px, -40px);}
            .ic-copy{transform: translate(-50px, -40px);}
        }
    }
    .action{
        cursor: pointer;
        line-height: 24px;
        position: absolute;
        font-size: 12px;
        transition: transform .25s ease-out;
        &:hover{
            color:#70deff;
        }
        &.ic-cover{
            top: 0;
            left:0;
        }
        &.ic-view{
            top: 0;
            right:0;
        }
        &.ic-del{
            bottom:0;
            left: 0;
        }
        &.ic-copy{
            bottom:0;
            right: 0;
        }
        .icon{
            font-size: 20px;
            display: block;
        }
    }
}

.filepond--drop-label label:hover{
    color: $main-color;
}

#filePondCover{
    height: 200px;
    text-align: center;
}
